<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=0,minimal-ui">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="renderer" content="webkit">
    <link rel="stylesheet" href="../css/animations.css">
    <title>css3：动画</title>
</head>
<body>
    <p>scale(缩放)</p>
        <span class="lt-big">big</span>
        <span class="lt-small">small</span><br/>
    <p>skew(倾斜)</p>
        <span class="lt-skewLeft">skewLeft</span>
        <span class="lt-skewRight">skewRight</span>
        <span class="lt-skewLeftTop">skewLeftTop</span>
        <span class="lt-skewRightTop">skewRightTop</span>
        <span class="lt-skewLeftBottom">skewLeftBottom</span>
        <span class="lt-skewRightBottom">skewRightBottom</span>
    <p>rotate(旋转)</p>
        <span class="lt-grow-rotate-l">grow-rotate-l</span>
        <span class="lt-grow-rotate-r">grow-rotate-r</span>
        <span class="lt-rotate5">rotate5</span>
        <span class="lt-rotate15">rotate15</span>
        <span class="lt-rotate30">rotate30</span>
        <span class="lt-rotate60">rotate60</span>
        <span class="lt-rotate90">rotate90</span>
        <span class="lt-rotate180">rotate180</span>
        <span class="lt-rotate360">rotate360</span>
        <span class="lt-rotate-5">rotate-5</span>
        <span class="lt-rotate-15">rotate-15</span>
        <span class="lt-rotate-30">rotate-30</span>
        <span class="lt-rotate-60">rotate-60</span>
        <span class="lt-rotate-90">rotate-90</span>
        <span class="lt-rotate-180">rotate-180</span>
    <p>translate(二维位移)，translate3d(三维位移)</p>
        <span class="lt-taranslate-top">top</span>
        <span class="lt-taranslate-bottom">bottom</span>
        <span class="lt-taranslate-left">left</span>
        <span class="lt-taranslate-right">right</span>
    <p>box-shadow(边框阴影、阴影变化)</p>
        <span class="lt-border-out">border-out</span>
        <span class="lt-border-in">border-in</span>
        <span class="lt-shadow">shadow</span>
        <span class="lt-shadow-in">shadow-in</span>
        <span class="lt-shadow-write">shadow-write</span>
        <span class="lt-shadow-big">shadow-big</span>
    <p>opacity(透明度)</p>
        <span class="lt-fade-out">fade-out</span>
        <span class="lt-fade-in">fade-in</span>
    <p>border-radius(圆角变化)</p>
        <span class="lt-rectangle">rectangle</span>
        <span class="lt-radius">radius</span>
    <p>after、before(颜色块变化)</p>
        <span class="lt-fade">fade</span>
        <span class="lt-fade-t">fade-t</span>
        <span class="lt-fade-b">fade-b</span>
        <span class="lt-fade-l">fade-l</span>
        <span class="lt-fade-r">fade-r</span>
        <span class="lt-bounce-t">bounce-t</span>
        <span class="lt-bounce-b">bounce-b</span>
        <span class="lt-bounce-l">bounce-l</span>
        <span class="lt-bounce-r">bounce-r</span>
        <span class="lt-fade-c-out">fade-c-out</span>
        <span class="lt-fade-c-in">fade-c-in</span>
        <span class="lt-fade-m-out">fade-m-out</span>
        <span class="lt-fade-m-in">fade-m-in</span>
    <p>after、before(颜色上下划线变化)</p>
        <span class="lt-overline-l ">overline-l</span>
        <span class="lt-overline-r">overline-r</span>
        <span class="lt-underline-l">underline-l</span>
        <span class="lt-underline-r">underline-r</span>
        <span class="lt-underline-c">underline-c</span>
        <span class="lt-underline-c-out">underline-c-out</span>
        <span class="lt-overline-c">overline-c</span>
        <span class="lt-overline-c-out">overline-c-out</span>

</body>
</html>